<style>
    .panel-notice.panel-warning > .panel-heading {
        background-color: rgba(252, 248, 227, 0.8);
    }

    .panel-notice {
        position: relative;
        top: 50%;
        margin: auto;
        margin-top: -190px;
        color: #ccc;
        max-width: 900px;
        height: 300px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .panel-notice .panel-title {
        font-family: 华文彩云;
        font-size: 22px;
    }

    .panel-notice .panel-body {
        height: 260px;
    }

    .panel-notice .panel-body .con {
        border: 1px solid #ccc;
        border-radius: 15px;
        height: 100%;
    }

    .panel-notice .notice-left ul {
        height: 190px;
        overflow: hidden;
    }

    .panel-notice .notice-left ul li {
        padding: 5px;
        text-align: left;
        font-family: 华文细黑;
        height: 40px;
    }

    .panel-notice .notice-left ul li a {
        word-break: keep-all;
        white-space: nowrap;
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 20px;
        color: #ccc;
    }

    .panel-notice .notice-left ul li a:hover {
        color: #06aaff;
        text-decoration: underline;
    }

    @media screen and (max-width: 410px) {
        .panel-notice .panel-body .notice-right .person {
            display: none;
        }
    }

    @media screen and (min-width: 768px) {
        .panel-notice .panel-body .notice-left {
            width: 30%;
            margin-right: 3%;
            float: left;
            padding: 15px;
        }

        .panel-notice .panel-body .notice-right {
            width: 65%;
            float: right;
        }
    }

    @media screen and (max-width: 768px) {
        .panel-notice .panel-body .notice-right {
            width: 100%;
        }

        .panel-notice .panel-body .notice-left {
            display: none !important;
        }
    }

    .noticeBtnActive a {
        color: #06aaff !important;
        text-decoration: underline;
    }

    .panel-notice .notice-right {
        padding: 5px;
        overflow: hidden;
    }

    .panel-notice .panel-body header span {
        padding: 2px;
        font-size: 12px;
        text-align: center;
    }

    .panel-notice header {
        overflow: hidden;
        text-align: center;
        margin-top: -5px;
        margin-bottom: 5px;
    }

    .panel-notice header span {
        text-align: center;
    }

    .panel-notice .notice-content {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        font-size: 16px;
        height: 130px;
        padding: 5px;
        overflow: hidden;
        border-radius: 8px;
    }

    .panel-notice .notice-footer a.prev {
        float: left;
        margin-left: 10px;
        margin-top: 8px;
    }

    .panel-notice .notice-footer a.next {
        float: right;
        margin-right: 10px;
        margin-top: 8px;
    }

    .panel-notice .noNotice {
        font-size: 14px;
    }

    .panel-notice .panel-body > div {
        display: none;
    }
</style>
<div class="panel panel-warning panel-notice">
    <div class="panel-heading">
        <h3 class="panel-title text-center">博 客 公 告 <a class="close"><i class="fa fa-times fa-lg pull-right"
                                                                        style="font-weight: 400;color:#ff3c0f;"></i></a>
        </h3>
    </div>
    <div class="panel-body">
        <div class="noNotice">&emsp;暂&emsp;无&emsp;公&emsp;告. . . . . .</div>
        <div class="notice-left con">
            <ul class="list-unstyled" onselectstart="return false;">

            </ul>
        </div>
        <div class="notice-right con">
            <h4 class="text-center"></h4>
            <header>
                <span class="person">发布人：<span></span></span>
                <span class="time">发布时间：<span></span></span>
            </header>
            <div class="notice-content"></div>
            <div class="notice-footer" onselectstart="return false;">
                <a class="prev">上一篇</a>
                <a class="next">下一篇</a>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".panel-notice .notice-left > ul,.panel-notice .notice-right .notice-content").niceScroll({
            cursorcolor: "#48c55e",
            cursoropacitymax: 1,
            touchbehavior: false,
            cursorwidth: "2px",
            cursorborder: "0",
            cursorborderradius: "2px",
            autohidemode: false
        });
        loadNoticeList();//加载公告列表
        $(".panel-notice .notice-right .notice-footer a").click(noticeBtnClick);//上一页和下一页事件
        $(".panel-notice .notice-left > ul").on("click", "li > a", leftListClick);//公告清单列表单机事件
        $(".panel-notice .panel-heading a").click(closeNoticePanel);//关闭窗口

    })

    function leftListClick() {
        var rightId = $(".panel-notice .notice-right").attr("id");
        var $li = $(this).parent("li");
        var id = $li.data("id");
        if (rightId == id) {
            return false;
        }
        $li.addClass("noticeBtnActive").siblings().removeClass("noticeBtnActive")
        var param = {
            id: id,
            title: $li.data("title"),
            content: $li.data("content"),
            create_time: $li.data("create_time"),
            username: $li.data("username")
        };
        setNoticeWinRightCon(param);
    }

    function loadNoticeList() {
        if (!globalVar.noticeBtnClick) {
            return false;
        }
        globalVar.noticeBtnClick = false;
        $.ajax({
            url: "/notice/getNoticeAll.zb",
            type: "POST",
            dataType: "JSON",
            data: {pageNum: globalVar.noticePageNum, pageSize: globalVar.noticePageSize, enable: 1}
        }).done(function (data) {
            if (!data) {
                layer.msg("加载公告失败！", fn);
                return false;
            }
            if (data.size > 0) {
                $(".panel-notice .con").show();
                var $ul = $(".panel-notice .notice-left > ul");
                $.each(data.list, function (index, elem) {
                    var $li = $(" <li><a>" + elem.title + "</a></li>");
                    $li.data("id", elem.id).data("content", elem.content).data("title", elem.title)
                        .data("create_time", elem.create_time).data("username", elem.username);
                    $ul.append($li);
                    if (index == 0 && data.isFirstPage) {
                        $li.addClass("noticeBtnActive");
                        setNoticeWinRightCon(elem);
                    }
                })

                if (!data.isLastPage) {
                    globalVar.noticePageNum++;
                    globalVar.noticeBtnClick = true;
                } else {
                    globalVar.noticeBtnClick = false;
                }
            } else {
                $(".panel-notice .noNotice").show();
            }
        }).fail(function () {
            layer.msg("可能由于网络原因，加载公告列表失败！", fn);
            globalVar.noticeBtnClick = false;
        })
    }

    function setNoticeWinRightCon(elem) {
        var $right = $(".panel-notice .notice-right");
        $right.attr("id", elem.id);
        $right.find("h4").text(elem.title);
        $right.find("span.person span").text(elem.username);
        $right.find("span.time span").text(elem.create_time);
        $right.find(".notice-content").html(elem.content);
    }

    function noticeBtnClick() {
        var clsName = $(this).attr("class");
        var $ul = $(".panel-notice .notice-left ul")
        var $leftLi = $ul.find("li");
        var index = $leftLi.filter(".noticeBtnActive").index();
        var li_len = $leftLi.length;
        var li_H = $leftLi
        if (clsName == "prev") {
            index--;
        } else {
            index++;
        }
        var $li;
        if (index <= 0) {
            $li = $leftLi.eq(0)
            $li.addClass("noticeBtnActive").siblings().removeClass("noticeBtnActive");
        } else if (index >= li_len - 1) {
            $li = $leftLi.eq(li_len - 1)
            $li.addClass("noticeBtnActive").siblings().removeClass("noticeBtnActive");
            //加载下一页
            loadNoticeList();
        } else {
            $li = $leftLi.eq(index);
            $li.addClass("noticeBtnActive").siblings().removeClass("noticeBtnActive");
        }
        $ul.stop().animate({scrollTop: $leftLi.outerHeight() * (index - 2)}, 500);
        var param = {
            id: $li.data("id"),
            title: $li.data("title"),
            content: $li.data("content"),
            create_time: $li.data("create_time"),
            username: $li.data("username")
        };
        setNoticeWinRightCon(param);
    }

    function closeNoticePanel() {
        $(".fixedNotice").fadeOut();
        $(".fixedNotice .panel-notice").slideUp();
    }
</script>
